<template>
  <div class="pending-cases">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-nav">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/judgment">地府审判系统</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>待审案件管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 页面头部区域 -->
    <div class="page-header">
      <div class="header-content">
        <div class="page-title">待审案件管理</div>
        <div class="page-subtitle">新增死者队列 · 案件优先级排序 · 审判时间安排 · 证据材料收集</div>
      </div>
      <div class="header-actions">
        <a-button type="primary" @click="showAddCase">
          <PlusOutlined />
          新增案件
        </a-button>
        <a-button @click="batchProcess">
          <ThunderboltOutlined />
          批量处理
        </a-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]">
        <a-col :xs="24" :sm="6">
          <div class="stat-card urgent">
            <div class="stat-icon">🔥</div>
            <div class="stat-content">
              <div class="stat-value">{{ stats.urgent }}</div>
              <div class="stat-label">紧急案件</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card high">
            <div class="stat-icon">⚡</div>
            <div class="stat-content">
              <div class="stat-value">{{ stats.high }}</div>
              <div class="stat-label">高优先级</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card normal">
            <div class="stat-icon">📋</div>
            <div class="stat-content">
              <div class="stat-value">{{ stats.normal }}</div>
              <div class="stat-label">普通案件</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card total">
            <div class="stat-icon">📊</div>
            <div class="stat-content">
              <div class="stat-value">{{ stats.total }}</div>
              <div class="stat-label">总计案件</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <a-row :gutter="[24, 24]">
        <!-- 左侧案件列表 -->
        <a-col :xs="24" :lg="16">
          <!-- 筛选和搜索 -->
          <div class="filter-section">
            <a-row :gutter="[16, 16]" align="middle">
              <a-col :flex="1">
                <a-input-search v-model:value="searchKeyword" placeholder="搜索死者姓名、案件编号..." @search="handleSearch" style="width: 100%" />
              </a-col>
              <a-col>
                <a-select v-model:value="priorityFilter" placeholder="优先级" style="width: 120px">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option value="紧急">紧急</a-select-option>
                  <a-select-option value="高">高</a-select-option>
                  <a-select-option value="中">中</a-select-option>
                  <a-select-option value="低">低</a-select-option>
                </a-select>
              </a-col>
              <a-col>
                <a-select v-model:value="statusFilter" placeholder="状态" style="width: 120px">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option value="待审">待审</a-select-option>
                  <a-select-option value="审理中">审理中</a-select-option>
                  <a-select-option value="补充材料">补充材料</a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </div>

          <!-- 案件列表 -->
          <div class="cases-list">
            <div class="list-header">
              <h3>案件队列 ({{ filteredCases.length }})</h3>
              <div class="sort-controls">
                <a-button-group>
                  <a-button :type="sortBy === 'priority' ? 'primary' : 'default'" @click="sortBy = 'priority'"> 优先级排序 </a-button>
                  <a-button :type="sortBy === 'time' ? 'primary' : 'default'" @click="sortBy = 'time'"> 时间排序 </a-button>
                  <a-button :type="sortBy === 'severity' ? 'primary' : 'default'" @click="sortBy = 'severity'"> 罪恶程度 </a-button>
                </a-button-group>
              </div>
            </div>

            <div class="cases-container">
              <div v-for="case_ in filteredCases" :key="case_.id" class="case-card" :class="{ selected: selectedCases.includes(case_.id) }" @click="selectCase(case_)">
                <div class="case-header">
                  <div class="case-info">
                    <div class="case-number">{{ case_.caseNumber }}</div>
                    <div class="death-name">{{ case_.deathName }}</div>
                  </div>
                  <div class="case-meta">
                    <a-tag :color="getPriorityColor(case_.priority)" size="small">
                      {{ case_.priority }}
                    </a-tag>
                    <a-tag :color="getStatusColor(case_.status)" size="small">
                      {{ case_.status }}
                    </a-tag>
                  </div>
                </div>

                <div class="case-body">
                  <div class="death-info">
                    <span class="info-item">
                      <UserOutlined />
                      {{ case_.age }}岁 · {{ case_.gender }}
                    </span>
                    <span class="info-item">
                      <CalendarOutlined />
                      {{ case_.deathDate }}
                    </span>
                    <span class="info-item">
                      <EnvironmentOutlined />
                      {{ case_.deathPlace }}
                    </span>
                  </div>

                  <div class="case-description">
                    {{ case_.deathCause }}
                  </div>

                  <div class="evidence-status">
                    <div class="evidence-item">
                      <FileTextOutlined />
                      证据材料: {{ case_.evidenceCount }}份
                      <a-progress :percent="case_.evidenceCompletion" size="small" :showInfo="false" :strokeColor="case_.evidenceCompletion === 100 ? '#52c41a' : '#faad14'" />
                    </div>
                  </div>
                </div>

                <div class="case-footer">
                  <div class="scheduled-info">
                    <ClockCircleOutlined />
                    <span v-if="case_.scheduledTime"> 预定审判: {{ case_.scheduledTime }} </span>
                    <span v-else class="not-scheduled"> 未安排审判时间 </span>
                  </div>

                  <div class="case-actions">
                    <a-button type="text" size="small" @click.stop="scheduleJudgment(case_)">
                      <CalendarOutlined />
                      安排时间
                    </a-button>
                    <a-button type="text" size="small" @click.stop="manageEvidence(case_)">
                      <FolderOutlined />
                      证据管理
                    </a-button>
                    <a-button type="text" size="small" @click.stop="viewDetails(case_)">
                      <EyeOutlined />
                      查看详情
                    </a-button>
                    <a-button type="text" size="small" @click.stop="showJudgment(case_)" v-if="case_.judgmentStatus === '待审判'">
                      <CheckOutlined />
                      审判
                    </a-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 右侧功能面板 -->
        <a-col :xs="24" :lg="8">
          <div class="function-panel">
            <!-- 快速操作 -->
            <div class="panel-section">
              <h4>快速操作</h4>
              <div class="quick-actions">
                <a-button block class="action-btn" @click="quickSchedule">
                  <CalendarOutlined />
                  批量安排审判时间
                </a-button>
                <a-button block class="action-btn" @click="priorityAdjust">
                  <ThunderboltOutlined />
                  优先级批量调整
                </a-button>
                <a-button block class="action-btn" @click="evidenceCheck">
                  <FileTextOutlined />
                  证据材料检查
                </a-button>
                <a-button block class="action-btn" @click="generateReport">
                  <BarChartOutlined />
                  生成统计报告
                </a-button>
              </div>
            </div>

            <!-- 审判时间安排 -->
            <div class="panel-section">
              <h4>今日审判安排</h4>
              <div class="schedule-timeline">
                <div v-for="schedule in todaySchedule" :key="schedule.id" class="schedule-item">
                  <div class="schedule-time">{{ schedule.time }}</div>
                  <div class="schedule-content">
                    <div class="schedule-case">{{ schedule.caseName }}</div>
                    <div class="schedule-court">{{ schedule.court }}</div>
                    <div class="schedule-status" :class="schedule.status">
                      {{ schedule.statusText }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 证据材料统计 -->
            <div class="panel-section">
              <h4>证据材料统计</h4>
              <div class="evidence-stats">
                <div class="evidence-item">
                  <span class="evidence-label">完整案件</span>
                  <span class="evidence-count">{{ evidenceStats.complete }}</span>
                </div>
                <div class="evidence-item">
                  <span class="evidence-label">缺少材料</span>
                  <span class="evidence-count warning">{{ evidenceStats.incomplete }}</span>
                </div>
                <div class="evidence-item">
                  <span class="evidence-label">待补充</span>
                  <span class="evidence-count error">{{ evidenceStats.pending }}</span>
                </div>
              </div>
            </div>

            <!-- 死者队列状态 -->
            <div class="panel-section">
              <h4>死者队列状态</h4>
              <div class="queue-status">
                <div class="queue-item">
                  <div class="queue-label">排队等候</div>
                  <div class="queue-count">{{ queueStats.waiting }}</div>
                </div>
                <div class="queue-item">
                  <div class="queue-label">材料审核中</div>
                  <div class="queue-count">{{ queueStats.reviewing }}</div>
                </div>
                <div class="queue-item">
                  <div class="queue-label">等待安排</div>
                  <div class="queue-count">{{ queueStats.scheduling }}</div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 新增案件弹窗 -->
    <a-modal v-model:open="addCaseVisible" title="新增案件" width="800px" @ok="handleAddCase" @cancel="resetAddForm">
      <a-form :model="addForm" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="死者姓名" required>
              <a-input v-model:value="addForm.deathName" placeholder="请输入死者姓名" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="年龄" required>
              <a-input-number v-model:value="addForm.age" :min="1" :max="150" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="性别" required>
              <a-select v-model:value="addForm.gender">
                <a-select-option value="男">男</a-select-option>
                <a-select-option value="女">女</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="死亡日期" required>
              <a-date-picker v-model:value="addForm.deathDate" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="死亡地点" required>
              <a-input v-model:value="addForm.deathPlace" placeholder="请输入死亡地点" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item label="优先级" required>
              <a-select v-model:value="addForm.priority">
                <a-select-option value="紧急">紧急</a-select-option>
                <a-select-option value="高">高</a-select-option>
                <a-select-option value="中">中</a-select-option>
                <a-select-option value="低">低</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="职业">
              <a-input v-model:value="addForm.occupation" placeholder="请输入职业" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="预期寿命">
              <a-input-number v-model:value="addForm.lastLifespan" :min="1" :max="150" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="死亡原因" required>
          <a-textarea v-model:value="addForm.deathCause" placeholder="请详细描述死亡原因" :rows="3" />
        </a-form-item>
        <a-form-item label="家庭情况">
          <a-input v-model:value="addForm.family" placeholder="请输入家庭情况" />
        </a-form-item>
        <a-form-item label="犯罪记录">
          <a-textarea v-model:value="addForm.criminalRecord" placeholder="请输入犯罪记录" :rows="2" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 证据管理弹窗 -->
    <a-modal v-model:open="evidenceVisible" title="证据管理" width="900px" @ok="handleEvidenceUpdate">
      <div v-if="currentCase">
        <div class="evidence-header">
          <h4>{{ currentCase.deathName }} ({{ currentCase.caseNumber }}) - 证据材料</h4>
        </div>

        <a-tabs>
          <a-tab-pane key="list" tab="证据列表">
            <div class="evidence-list">
              <div class="evidence-upload">
                <a-upload-dragger>
                  <p class="ant-upload-drag-icon">
                    <InboxOutlined />
                  </p>
                  <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
                  <p class="ant-upload-hint">支持单个或批量上传证据材料</p>
                </a-upload-dragger>
              </div>

              <a-table :dataSource="evidenceList" :columns="evidenceColumns" :pagination="false" class="evidence-table">
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'status'">
                    <a-tag :color="record.status === '已验证' ? 'green' : 'orange'">
                      {{ record.status }}
                    </a-tag>
                  </template>
                  <template v-if="column.key === 'action'">
                    <a-button type="link" size="small">查看</a-button>
                    <a-button type="link" size="small">下载</a-button>
                    <a-button type="link" size="small" danger>删除</a-button>
                  </template>
                </template>
              </a-table>
            </div>
          </a-tab-pane>

          <a-tab-pane key="analysis" tab="证据分析">
            <div class="evidence-analysis">
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-card title="证据完整性分析" size="small">
                    <div class="analysis-item">
                      <span>必要证据：</span>
                      <a-progress :percent="85" size="small" />
                    </div>
                    <div class="analysis-item">
                      <span>补充证据：</span>
                      <a-progress :percent="60" size="small" />
                    </div>
                    <div class="analysis-item">
                      <span>关键证据：</span>
                      <a-progress :percent="90" size="small" />
                    </div>
                  </a-card>
                </a-col>
                <a-col :span="12">
                  <a-card title="证据可信度评估" size="small">
                    <div class="credibility-score">
                      <div class="score-circle">
                        <span class="score">87%</span>
                      </div>
                      <div class="score-desc">证据可信度较高</div>
                    </div>
                  </a-card>
                </a-col>
              </a-row>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-modal>

    <!-- 安排时间弹窗 -->
    <a-modal v-model:open="scheduleVisible" title="安排审判时间" @ok="handleScheduleTime">
      <div v-if="currentCase">
        <div class="schedule-info">
          <h4>案件信息</h4>
          <p>案件编号: {{ currentCase.caseNumber }}</p>
          <p>死者姓名: {{ currentCase.deathName }}</p>
          <p>优先级: {{ currentCase.priority }}</p>
        </div>

        <a-form layout="vertical">
          <a-form-item label="审判日期" required>
            <a-date-picker v-model:value="scheduleForm.date" style="width: 100%" />
          </a-form-item>
          <a-form-item label="审判时间" required>
            <a-time-picker v-model:value="scheduleForm.time" style="width: 100%" format="HH:mm" />
          </a-form-item>
          <a-form-item label="分配阎王" required>
            <a-select v-model:value="scheduleForm.judge">
              <a-select-option value="秦广王">一殿 秦广王</a-select-option>
              <a-select-option value="楚江王">二殿 楚江王</a-select-option>
              <a-select-option value="宋帝王">三殿 宋帝王</a-select-option>
              <a-select-option value="伍官王">四殿 伍官王</a-select-option>
              <a-select-option value="阎罗王">五殿 阎罗王</a-select-option>
              <a-select-option value="卞城王">六殿 卞城王</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="预计时长(分钟)">
            <a-input-number v-model:value="scheduleForm.duration" :min="30" :max="300" style="width: 100%" />
          </a-form-item>
          <a-form-item label="备注">
            <a-textarea v-model:value="scheduleForm.remark" :rows="3" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>

    <!-- 查看详情弹窗 -->
    <a-modal v-model:open="detailVisible" title="案件详情" width="1000px" :footer="null">
      <div v-if="currentCase">
        <a-descriptions title="基本信息" :column="3" bordered>
          <a-descriptions-item label="案件编号">{{ currentCase.caseNumber }}</a-descriptions-item>
          <a-descriptions-item label="死者姓名">{{ currentCase.deathName }}</a-descriptions-item>
          <a-descriptions-item label="性别年龄">{{ currentCase.gender }} / {{ currentCase.age }}岁</a-descriptions-item>
          <a-descriptions-item label="死亡日期">{{ currentCase.deathDate }}</a-descriptions-item>
          <a-descriptions-item label="死亡地点">{{ currentCase.deathPlace }}</a-descriptions-item>
          <a-descriptions-item label="优先级">
            <a-tag :color="getPriorityColor(currentCase.priority)">{{ currentCase.priority }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="审判状态">
            <a-tag :color="currentCase.judgmentStatus === '已审判' ? 'green' : 'orange'">
              {{ currentCase.judgmentStatus }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="职业">{{ currentCase.occupation }}</a-descriptions-item>
          <a-descriptions-item label="预期寿命">{{ currentCase.lastLifespan }}岁</a-descriptions-item>
          <a-descriptions-item label="家庭情况" :span="2">{{ currentCase.family }}</a-descriptions-item>
          <a-descriptions-item label="业力评分">
            <span :style="{ color: currentCase.karmaScore > 0 ? '#52c41a' : '#ff4d4f' }">
              {{ currentCase.karmaScore }}
            </span>
          </a-descriptions-item>
        </a-descriptions>

        <a-descriptions title="案件详情" style="margin-top: 24px" bordered>
          <a-descriptions-item label="死亡原因" :span="3">{{ currentCase.deathCause }}</a-descriptions-item>
          <a-descriptions-item label="犯罪记录" :span="3">{{ currentCase.criminalRecord }}</a-descriptions-item>
        </a-descriptions>

        <div style="margin-top: 24px">
          <h4>证据材料统计</h4>
          <a-row :gutter="16">
            <a-col :span="8">
              <a-statistic title="证据总数" :value="currentCase.evidenceCount" suffix="份" />
            </a-col>
            <a-col :span="8">
              <a-statistic title="完成度" :value="currentCase.evidenceCompletion" suffix="%" />
            </a-col>
            <a-col :span="8">
              <a-statistic title="审判时间" :value="currentCase.scheduledTime || '未安排'" />
            </a-col>
          </a-row>
        </div>
      </div>
    </a-modal>

    <!-- 审判弹窗 -->
    <a-modal v-model:open="judgmentVisible" title="案件审判" @ok="handleJudgment">
      <div v-if="currentCase">
        <div class="judgment-info">
          <h4>审判案件</h4>
          <p>案件编号: {{ currentCase.caseNumber }}</p>
          <p>死者姓名: {{ currentCase.deathName }}</p>
          <p>当前状态: {{ currentCase.status }}</p>
        </div>

        <a-form layout="vertical">
          <a-form-item label="审判结果" required>
            <a-radio-group v-model:value="judgmentForm.result">
              <a-radio value="有罪">判定有罪</a-radio>
              <a-radio value="无罪">判定无罪</a-radio>
              <a-radio value="补充">要求补充材料</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="审判意见" required>
            <a-textarea v-model:value="judgmentForm.comment" placeholder="请输入审判意见" :rows="4" />
          </a-form-item>
          <a-form-item label="下一步处理">
            <a-select v-model:value="judgmentForm.nextStep">
              <a-select-option value="执行刑罚">执行刑罚</a-select-option>
              <a-select-option value="补充证据">等待补充证据</a-select-option>
              <a-select-option value="转世投胎">安排转世投胎</a-select-option>
              <a-select-option value="结案归档">结案归档</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  PlusOutlined,
  ThunderboltOutlined,
  UserOutlined,
  CalendarOutlined,
  EnvironmentOutlined,
  FileTextOutlined,
  ClockCircleOutlined,
  FolderOutlined,
  EyeOutlined,
  BarChartOutlined,
  CheckOutlined,
  InboxOutlined,
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
  CheckCircleOutlined,
  FilterOutlined
} from '@ant-design/icons-vue'
import dayjs from 'dayjs'

// 路由
const router = useRouter()
const route = useRoute()

// 响应式数据
const searchKeyword = ref('')
const priorityFilter = ref('')
const statusFilter = ref('')
const sortBy = ref('priority')
const selectedCases = ref([])

// 统计数据
const stats = ref({
  urgent: 8,
  high: 23,
  normal: 125,
  total: 156
})

// 案件列表数据
const cases = ref([
  {
    id: 1,
    caseNumber: 'YF-2023-001',
    deathName: '张三',
    age: 45,
    gender: '男',
    deathDate: '2023-12-10',
    deathPlace: '北京市朝阳区',
    deathCause: '恶意杀害三人后畏罪自杀，罪恶深重',
    priority: '紧急',
    status: '待审',
    evidenceCount: 8,
    evidenceCompletion: 100,
    scheduledTime: '今日 14:00',
    karmaScore: -85,
    judgmentStatus: '待审判',
    lastLifespan: 65,
    occupation: '企业老板',
    family: '妻子1人，子女2人',
    criminalRecord: '有前科，曾因诈骗入狱'
  },
  {
    id: 2,
    caseNumber: 'YF-2023-002',
    deathName: '李四',
    age: 52,
    gender: '男',
    deathDate: '2023-12-11',
    deathPlace: '上海市浦东新区',
    deathCause: '贪污受贿巨额款项，病死狱中',
    priority: '高',
    status: '补充材料',
    evidenceCount: 5,
    evidenceCompletion: 75,
    scheduledTime: '',
    karmaScore: -62,
    judgmentStatus: '已审判',
    lastLifespan: 70,
    occupation: '政府官员',
    family: '妻子1人，子女1人',
    criminalRecord: '无前科，初犯'
  },
  {
    id: 3,
    caseNumber: 'YF-2023-003',
    deathName: '王五',
    age: 35,
    gender: '男',
    deathDate: '2023-12-12',
    deathPlace: '广州市天河区',
    deathCause: '交通事故意外死亡，生前为人善良',
    priority: '中',
    status: '待审',
    evidenceCount: 3,
    evidenceCompletion: 90,
    scheduledTime: '明日 09:00',
    karmaScore: 45,
    judgmentStatus: '已审判',
    lastLifespan: 75,
    occupation: '教师',
    family: '妻子1人，子女2人',
    criminalRecord: '无犯罪记录'
  },
  {
    id: 4,
    caseNumber: 'YF-2023-004',
    deathName: '赵六',
    age: 28,
    gender: '女',
    deathDate: '2023-12-13',
    deathPlace: '深圳市南山区',
    deathCause: '见义勇为救人溺水而亡，功德无量',
    priority: '中',
    status: '审理中',
    evidenceCount: 4,
    evidenceCompletion: 100,
    scheduledTime: '今日 16:00',
    karmaScore: 88,
    judgmentStatus: '已审判',
    lastLifespan: 80,
    occupation: '护士',
    family: '未婚',
    criminalRecord: '无犯罪记录'
  },
  {
    id: 5,
    caseNumber: 'YF-2023-005',
    deathName: '钱七',
    age: 38,
    gender: '男',
    deathDate: '2023-12-14',
    deathPlace: '成都市武侯区',
    deathCause: '酒后驾车撞死行人，肇事逃逸后自首',
    priority: '高',
    status: '待审',
    evidenceCount: 6,
    evidenceCompletion: 85,
    scheduledTime: '明日 11:00',
    karmaScore: -48,
    judgmentStatus: '待审判',
    lastLifespan: 60,
    occupation: '销售经理',
    family: '妻子1人，子女1人',
    criminalRecord: '有酒驾记录'
  },
  {
    id: 6,
    caseNumber: 'YF-2023-006',
    deathName: '孙八',
    age: 67,
    gender: '男',
    deathDate: '2023-12-15',
    deathPlace: '西安市雁塔区',
    deathCause: '自然死亡，生前乐善好施',
    priority: '低',
    status: '待审',
    evidenceCount: 2,
    evidenceCompletion: 100,
    scheduledTime: '',
    karmaScore: 65,
    judgmentStatus: '已审判',
    lastLifespan: 85,
    occupation: '退休教师',
    family: '妻子1人，子女3人',
    criminalRecord: '无犯罪记录'
  },
  {
    id: 7,
    caseNumber: 'YF-2023-007',
    deathName: '周九',
    age: 29,
    gender: '女',
    deathDate: '2023-12-16',
    deathPlace: '杭州市西湖区',
    deathCause: '为救落水儿童而牺牲，英勇无畏',
    priority: '低',
    status: '审理中',
    evidenceCount: 3,
    evidenceCompletion: 100,
    scheduledTime: '后天 10:00',
    karmaScore: 92,
    judgmentStatus: '已审判',
    lastLifespan: 85,
    occupation: '消防员',
    family: '父母健在',
    criminalRecord: '无犯罪记录'
  },
  {
    id: 8,
    caseNumber: 'YF-2023-008',
    deathName: '吴十',
    age: 41,
    gender: '男',
    deathDate: '2023-12-17',
    deathPlace: '武汉市洪山区',
    deathCause: '贩卖毒品被警察围捕时跳楼身亡',
    priority: '高',
    status: '补充材料',
    evidenceCount: 7,
    evidenceCompletion: 60,
    scheduledTime: '',
    karmaScore: -72,
    judgmentStatus: '审判中',
    lastLifespan: 55,
    occupation: '无业游民',
    family: '离异，子女1人',
    criminalRecord: '多次犯罪记录'
  },
  {
    id: 9,
    caseNumber: 'YF-2023-009',
    deathName: '郑十一',
    age: 56,
    gender: '女',
    deathDate: '2023-12-18',
    deathPlace: '南京市鼓楼区',
    deathCause: '心脏病发作去世，生前积德行善',
    priority: '中',
    status: '待审',
    evidenceCount: 4,
    evidenceCompletion: 95,
    scheduledTime: '后天 14:00',
    karmaScore: 58,
    judgmentStatus: '已审判',
    lastLifespan: 78,
    occupation: '慈善工作者',
    family: '丈夫1人，子女2人',
    criminalRecord: '无犯罪记录'
  },
  {
    id: 10,
    caseNumber: 'YF-2023-010',
    deathName: '王十二',
    age: 33,
    gender: '男',
    deathDate: '2023-12-19',
    deathPlace: '重庆市渝中区',
    deathCause: '工伤事故死亡，生前勤劳朴实',
    priority: '中',
    status: '待审',
    evidenceCount: 5,
    evidenceCompletion: 80,
    scheduledTime: '',
    karmaScore: 35,
    judgmentStatus: '待审判',
    lastLifespan: 70,
    occupation: '建筑工人',
    family: '妻子1人，子女2人',
    criminalRecord: '无犯罪记录'
  }
])

// 今日审判安排
const todaySchedule = ref([
  { id: 1, time: '09:00', caseName: '张三案', court: '一殿', status: 'completed', statusText: '已完成' },
  { id: 2, time: '14:00', caseName: '李四案', court: '三殿', status: 'in-progress', statusText: '审理中' },
  { id: 3, time: '16:00', caseName: '王五案', court: '五殿', status: 'scheduled', statusText: '已安排' }
])

// 证据材料统计
const evidenceStats = ref({
  complete: 89,
  incomplete: 45,
  pending: 22
})

// 队列状态统计
const queueStats = ref({
  waiting: 78,
  reviewing: 35,
  scheduling: 43
})

// 弹窗状态
const addCaseVisible = ref(false)
const evidenceVisible = ref(false)
const scheduleVisible = ref(false)
const detailVisible = ref(false)
const judgmentVisible = ref(false)
const currentCase = ref(null)

// 表单数据
const addForm = ref({
  deathName: '',
  age: null,
  gender: '',
  deathDate: null,
  deathPlace: '',
  deathCause: '',
  priority: '中',
  occupation: '',
  lastLifespan: null,
  family: '',
  criminalRecord: ''
})

const scheduleForm = ref({
  date: null,
  time: null,
  judge: '',
  duration: 60,
  remark: ''
})

const judgmentForm = ref({
  result: '',
  comment: '',
  nextStep: ''
})

// 证据列表数据
const evidenceList = ref([
  {
    id: 1,
    name: '死亡证明',
    type: '必要证据',
    size: '2.5MB',
    uploadTime: '2023-12-10 14:30',
    status: '已验证'
  },
  {
    id: 2,
    name: '身份证明',
    type: '必要证据',
    size: '1.8MB',
    uploadTime: '2023-12-10 15:20',
    status: '已验证'
  },
  {
    id: 3,
    name: '案发现场照片',
    type: '关键证据',
    size: '15.6MB',
    uploadTime: '2023-12-11 09:15',
    status: '待验证'
  },
  {
    id: 4,
    name: '证人证言',
    type: '补充证据',
    size: '0.8MB',
    uploadTime: '2023-12-11 16:45',
    status: '已验证'
  },
  {
    id: 5,
    name: '法医报告',
    type: '关键证据',
    size: '3.2MB',
    uploadTime: '2023-12-12 10:30',
    status: '待验证'
  }
])

// 证据表格列配置
const evidenceColumns = [
  {
    title: '证据名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '证据类型',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '文件大小',
    dataIndex: 'size',
    key: 'size'
  },
  {
    title: '上传时间',
    dataIndex: 'uploadTime',
    key: 'uploadTime'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '操作',
    key: 'action'
  }
]

// 计算属性
const filteredCases = computed(() => {
  let filtered = cases.value

  // 搜索过滤
  if (searchKeyword.value) {
    filtered = filtered.filter((case_) => case_.deathName.includes(searchKeyword.value) || case_.caseNumber.includes(searchKeyword.value))
  }

  // 优先级过滤
  if (priorityFilter.value) {
    filtered = filtered.filter((case_) => case_.priority === priorityFilter.value)
  }

  // 状态过滤
  if (statusFilter.value) {
    filtered = filtered.filter((case_) => case_.status === statusFilter.value)
  }

  // 排序
  if (sortBy.value === 'priority') {
    const priorityOrder = { 紧急: 0, 高: 1, 中: 2, 低: 3 }
    filtered.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority])
  } else if (sortBy.value === 'time') {
    filtered.sort((a, b) => new Date(b.deathDate) - new Date(a.deathDate))
  } else if (sortBy.value === 'severity') {
    filtered.sort((a, b) => a.karmaScore - b.karmaScore)
  }

  return filtered
})

// 方法
const getPriorityColor = (priority) => {
  const colors = {
    紧急: 'red',
    高: 'orange',
    中: 'blue',
    低: 'green'
  }
  return colors[priority] || 'default'
}

const getStatusColor = (status) => {
  const colors = {
    待审: 'orange',
    审理中: 'blue',
    补充材料: 'purple'
  }
  return colors[status] || 'default'
}

const selectCase = (case_) => {
  const index = selectedCases.value.indexOf(case_.id)
  if (index > -1) {
    selectedCases.value.splice(index, 1)
  } else {
    selectedCases.value.push(case_.id)
  }
}

const showAddCase = () => {
  addCaseVisible.value = true
}

const batchProcess = () => {
  // 批量处理选中案件
  console.log('批量处理', selectedCases.value)
}

const scheduleJudgment = (case_) => {
  currentCase.value = case_
  scheduleVisible.value = true
}

const manageEvidence = (case_) => {
  currentCase.value = case_
  evidenceVisible.value = true
}

const viewDetails = (case_) => {
  currentCase.value = case_
  detailVisible.value = true
}

const showJudgment = (case_) => {
  currentCase.value = case_
  judgmentVisible.value = true
}

// 新增案件处理
const handleAddCase = () => {
  // 验证表单
  if (!addForm.value.deathName || !addForm.value.age || !addForm.value.gender || !addForm.value.deathDate || !addForm.value.deathCause) {
    // 这里应该显示错误提示
    return
  }

  // 生成案件编号
  const newCaseNumber = 'YF-2023-' + String(cases.value.length + 1).padStart(3, '0')

  // 创建新案件
  const newCase = {
    id: cases.value.length + 1,
    caseNumber: newCaseNumber,
    deathName: addForm.value.deathName,
    age: addForm.value.age,
    gender: addForm.value.gender,
    deathDate: dayjs(addForm.value.deathDate).format('YYYY-MM-DD'),
    deathPlace: addForm.value.deathPlace,
    deathCause: addForm.value.deathCause,
    priority: addForm.value.priority,
    status: '待审',
    evidenceCount: 0,
    evidenceCompletion: 0,
    scheduledTime: '',
    karmaScore: 0,
    judgmentStatus: '待审判',
    lastLifespan: addForm.value.lastLifespan || 75,
    occupation: addForm.value.occupation || '未知',
    family: addForm.value.family || '无记录',
    criminalRecord: addForm.value.criminalRecord || '无犯罪记录'
  }

  cases.value.unshift(newCase)
  addCaseVisible.value = false
  resetAddForm()
}

const resetAddForm = () => {
  addForm.value = {
    deathName: '',
    age: null,
    gender: '',
    deathDate: null,
    deathPlace: '',
    deathCause: '',
    priority: '中',
    occupation: '',
    lastLifespan: null,
    family: '',
    criminalRecord: ''
  }
}

// 安排时间处理
const handleScheduleTime = () => {
  if (!scheduleForm.value.date || !scheduleForm.value.time || !scheduleForm.value.judge) {
    return
  }

  const formatDate = dayjs(scheduleForm.value.date).format('MM-DD')
  const formatTime = dayjs(scheduleForm.value.time).format('HH:mm')

  // 更新案件的安排时间
  const caseIndex = cases.value.findIndex((c) => c.id === currentCase.value.id)
  if (caseIndex > -1) {
    cases.value[caseIndex].scheduledTime = `${formatDate} ${formatTime}`
    cases.value[caseIndex].status = '已安排'
  }

  scheduleVisible.value = false
  resetScheduleForm()
}

const resetScheduleForm = () => {
  scheduleForm.value = {
    date: null,
    time: null,
    judge: '',
    duration: 60,
    remark: ''
  }
}

// 证据管理处理
const handleEvidenceUpdate = () => {
  evidenceVisible.value = false
}

// 审判处理
const handleJudgment = () => {
  if (!judgmentForm.value.result || !judgmentForm.value.comment) {
    return
  }

  const caseIndex = cases.value.findIndex((c) => c.id === currentCase.value.id)
  if (caseIndex > -1) {
    if (judgmentForm.value.result === '有罪') {
      cases.value[caseIndex].judgmentStatus = '已审判'
      cases.value[caseIndex].status = '已判决'
    } else if (judgmentForm.value.result === '无罪') {
      cases.value[caseIndex].judgmentStatus = '已审判'
      cases.value[caseIndex].status = '无罪释放'
    } else if (judgmentForm.value.result === '补充') {
      cases.value[caseIndex].judgmentStatus = '待补充'
      cases.value[caseIndex].status = '补充材料'
    }
  }

  judgmentVisible.value = false
  resetJudgmentForm()
}

const resetJudgmentForm = () => {
  judgmentForm.value = {
    result: '',
    comment: '',
    nextStep: ''
  }
}

const handleSearch = () => {
  // 处理搜索
  console.log('搜索:', searchKeyword.value)
}

const quickSchedule = () => {
  console.log('批量安排审判时间')
}

const priorityAdjust = () => {
  console.log('优先级批量调整')
}

const evidenceCheck = () => {
  console.log('证据材料检查')
}

const generateReport = () => {
  console.log('生成统计报告')
}

// 生命周期
onMounted(() => {
  console.log('待审案件管理页面已加载')
})
</script>

<style lang="scss" scoped>
.pending-cases {
  padding: 0;

  // 面包屑导航
  .breadcrumb-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;

    .current-route {
      font-size: 12px;
      color: $text-tertiary;
      background: rgba(255, 255, 255, 0.1);
      padding: 4px 8px;
      border-radius: 4px;
    }
  }

  // 页面头部
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;

    .header-content {
      .page-title {
        font-size: 28px;
        font-weight: bold;
        color: $text-primary;
        margin-bottom: 8px;
      }

      .page-subtitle {
        font-size: 14px;
        color: $text-secondary;
        letter-spacing: 1px;
      }
    }

    .header-actions {
      display: flex;
      gap: 12px;
    }
  }

  // 统计卡片
  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      backdrop-filter: blur(10px);

      &.urgent {
        border-color: rgba(255, 77, 79, 0.3);
      }

      &.high {
        border-color: rgba(245, 84, 28, 0.3);
      }

      &.normal {
        border-color: rgba(24, 144, 255, 0.3);
      }

      &.total {
        border-color: rgba(114, 46, 209, 0.3);
      }

      .stat-icon {
        font-size: 24px;
        margin-bottom: 8px;
      }

      .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: $text-primary;
        margin-bottom: 4px;
      }

      .stat-label {
        font-size: 12px;
        color: $text-secondary;
      }
    }
  }

  // 筛选区域
  .filter-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
  }

  // 案件列表
  .cases-list {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      h3 {
        margin: 0;
        color: $text-primary;
        font-size: 18px;
      }
    }

    .cases-container {
      display: flex;
      flex-direction: column;
      gap: 16px;

      .case-card {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 16px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.12);
          border-color: rgba(114, 46, 209, 0.5);
        }

        &.selected {
          background: rgba(114, 46, 209, 0.1);
          border-color: $primary-color;
        }

        .case-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .case-info {
            .case-number {
              font-size: 12px;
              color: $text-tertiary;
              margin-bottom: 4px;
            }

            .death-name {
              font-size: 16px;
              font-weight: 600;
              color: $text-primary;
            }
          }

          .case-meta {
            display: flex;
            gap: 8px;
          }
        }

        .case-body {
          margin-bottom: 16px;

          .death-info {
            display: flex;
            gap: 16px;
            margin-bottom: 8px;
            flex-wrap: wrap;

            .info-item {
              font-size: 12px;
              color: $text-secondary;
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }

          .case-description {
            font-size: 14px;
            color: $text-secondary;
            margin-bottom: 12px;
            line-height: 1.4;
          }

          .evidence-status {
            .evidence-item {
              font-size: 12px;
              color: $text-secondary;
              display: flex;
              align-items: center;
              gap: 8px;

              :deep(.ant-progress) {
                flex: 1;
                margin-left: 8px;
              }
            }
          }
        }

        .case-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .scheduled-info {
            font-size: 12px;
            color: $text-secondary;
            display: flex;
            align-items: center;
            gap: 4px;

            .not-scheduled {
              color: #fa541c;
            }
          }

          .case-actions {
            display: flex;
            gap: 8px;
          }
        }
      }
    }
  }

  // 功能面板
  .function-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;

    .panel-section {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 20px;

      h4 {
        margin: 0 0 16px 0;
        color: $text-primary;
        font-size: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .quick-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .action-btn {
          text-align: left;
          height: 40px;
          background: rgba(255, 255, 255, 0.05);
          border-color: rgba(255, 255, 255, 0.2);

          &:hover {
            background: rgba(114, 46, 209, 0.1);
            border-color: $primary-color;
          }
        }
      }

      .schedule-timeline {
        .schedule-item {
          display: flex;
          align-items: center;
          padding: 8px 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);

          &:last-child {
            border-bottom: none;
          }

          .schedule-time {
            font-size: 12px;
            color: $text-secondary;
            width: 50px;
            flex-shrink: 0;
          }

          .schedule-content {
            flex: 1;
            margin-left: 12px;

            .schedule-case {
              font-size: 13px;
              color: $text-primary;
              margin-bottom: 2px;
            }

            .schedule-court {
              font-size: 11px;
              color: $text-tertiary;
              margin-bottom: 2px;
            }

            .schedule-status {
              font-size: 10px;
              padding: 2px 6px;
              border-radius: 3px;

              &.completed {
                background: rgba(82, 196, 26, 0.2);
                color: #52c41a;
              }

              &.in-progress {
                background: rgba(24, 144, 255, 0.2);
                color: #1890ff;
              }

              &.scheduled {
                background: rgba(255, 255, 255, 0.1);
                color: $text-tertiary;
              }
            }
          }
        }
      }

      .evidence-stats,
      .queue-status {
        .evidence-item,
        .queue-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);

          &:last-child {
            border-bottom: none;
          }

          .evidence-label,
          .queue-label {
            font-size: 13px;
            color: $text-secondary;
          }

          .evidence-count,
          .queue-count {
            font-size: 14px;
            font-weight: 500;
            color: $text-primary;

            &.warning {
              color: #fa8c16;
            }

            &.error {
              color: #ff4d4f;
            }
          }
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .pending-cases {
    .breadcrumb-nav {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .page-header {
      flex-direction: column;
      gap: 16px;

      .header-actions {
        width: 100%;
        justify-content: stretch;

        .ant-btn {
          flex: 1;
        }
      }
    }

    .filter-section {
      :deep(.ant-row) {
        flex-direction: column;

        .ant-col {
          width: 100% !important;
        }
      }
    }

    .case-card {
      .case-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;

        .case-actions {
          width: 100%;
          justify-content: space-between;
        }
      }
    }
  }

  // 弹窗相关样式
  :deep(.ant-modal) {
    .ant-modal-content {
      background: rgba(20, 20, 30, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
    }

    .ant-modal-header {
      background: rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-modal-title {
        color: $text-primary;
      }
    }

    .ant-modal-body {
      color: $text-primary;
    }
  }

  .evidence-header h4 {
    color: $text-primary;
    margin-bottom: 16px;
  }

  .evidence-upload {
    margin-bottom: 20px;

    :deep(.ant-upload-dragger) {
      background: rgba(255, 255, 255, 0.05);
      border: 2px dashed rgba(255, 255, 255, 0.2);

      &:hover {
        border-color: $primary-color;
      }

      .ant-upload-drag-icon {
        color: $primary-color;
      }

      .ant-upload-text {
        color: $text-primary;
      }

      .ant-upload-hint {
        color: $text-secondary;
      }
    }
  }

  .evidence-table {
    :deep(.ant-table) {
      background: transparent;

      .ant-table-thead > tr > th {
        background: rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: $text-primary;
      }

      .ant-table-tbody > tr > td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: $text-secondary;
      }

      .ant-table-tbody > tr:hover > td {
        background: rgba(255, 255, 255, 0.05);
      }
    }
  }

  .evidence-analysis {
    .analysis-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;

      span {
        margin-right: 12px;
        min-width: 80px;
        color: $text-secondary;
      }
    }

    .credibility-score {
      text-align: center;

      .score-circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: conic-gradient(#52c41a 0deg 313deg, rgba(255, 255, 255, 0.1) 313deg 360deg);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12px;

        .score {
          font-size: 20px;
          font-weight: bold;
          color: $text-primary;
        }
      }

      .score-desc {
        color: $text-secondary;
      }
    }
  }

  .schedule-info,
  .judgment-info {
    background: rgba(255, 255, 255, 0.05);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;

    h4 {
      color: $text-primary;
      margin-bottom: 12px;
    }

    p {
      color: $text-secondary;
      margin-bottom: 4px;
    }
  }

  :deep(.ant-form-item-label > label) {
    color: $text-primary;
  }

  :deep(.ant-input),
  :deep(.ant-input-number),
  :deep(.ant-select-selector),
  :deep(.ant-picker),
  :deep(.ant-input.ant-input) {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: $text-primary;

    &:hover {
      border-color: $primary-color;
    }

    &:focus {
      border-color: $primary-color;
      box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2);
    }
  }

  :deep(.ant-select-dropdown) {
    background: rgba(20, 20, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);

    .ant-select-item {
      color: $text-primary;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }
    }
  }

  :deep(.ant-radio-wrapper) {
    color: $text-primary;
  }

  :deep(.ant-descriptions) {
    .ant-descriptions-header {
      .ant-descriptions-title {
        color: $text-primary;
      }
    }

    .ant-descriptions-item-label {
      color: $text-secondary;
    }

    .ant-descriptions-item-content {
      color: $text-primary;
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .pending-cases {
    .breadcrumb-nav {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .page-header {
      flex-direction: column;
      gap: 16px;

      .header-actions {
        width: 100%;
        justify-content: stretch;

        .ant-btn {
          flex: 1;
        }
      }
    }

    .filter-section {
      :deep(.ant-row) {
        flex-direction: column;

        .ant-col {
          width: 100% !important;
        }
      }
    }

    .case-card {
      .case-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;

        .case-actions {
          width: 100%;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
